<template>
  <div class="page">
    <div class="from">
      <div class="from-title">校园二手交易系统</div>
      <!-- 用户表单 -->
      <div class="container2-childer2">
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="账号" prop="username">
            <el-input v-model.number="ruleForm2.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm2.pwd"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 验证码 -->

          <el-form-item>
            <el-button type="primary" @click="submitForm()">登录</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
          <!-- 找回密码 -->
          <div class="contain3">
            <span class="c3-findpwd" @click="findpwd">找回密码</span>
            <span class="c3-sgin" @click="sign">注册账号</span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import remote from '@/utils/http'
export default {
  name: 'Login',
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      }
      setTimeout(() => {
        if (value.length > 18) {
          callback(new Error('账号不合法'))
        } else {
          callback()
        }
      }, 1000)
    }

    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm2.checkPwd !== '') {
          this.$refs.ruleForm2.validateField('checkPwd')
        }
        callback()
      }
    }

    return {
      ruleForm2: {
        pwd: '',
        username: ''
      },

      rules2: {
        pwd: [{ validator: validatePwd, trigger: 'blur' }],
        username: [{ validator: checkUsername, trigger: 'blur' }]
      }
    }
  },
  created () {},
  methods: {
    // 点击登录后触发事件
    submitForm () {
      var that = this
      // remote(1第一个参数：请求地址，2第二个参数：请求方式，3第三个参数：请求参数)
      remote('login', 'test', {name: this.ruleForm2.username, pwd: this.ruleForm2.pwd})
        .then(data => {
          if (data.code === 0) {
            that.$message({
              message: data.message,
              type: 'success'
            })
            // 瞎写——延时跳入主界面
            setTimeout(function () {
              that.$router.push('/')
            }, 1000)
          } else {
            that.$message({
              message: data.message,
              type: 'error'
            })
          }
        })
    },
    // 重置数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 获取验证码
    earnpin () {
      alert('获取验证码')
    },
    // 找密码
    findpwd () {
      this.$router.push({ path: '/findpwd' })
    },
    // 注册
    sign () {
      this.$router.push({ path: '/registered' })
    }
  }
}
</script>

<style scoped>
.page {
  height: 100vh;
  width: 100vw;
  background-image: url("/static/images/login/login.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.from {
  width: 30%;
  text-align: center;
  margin: 1em auto;
  border-radius: 5px;
  background-color: #ffffff;
}
/deep/ .el-form-item {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: 100px;
}
/deep/ .el-form--label-left .el-form-item__label {
  text-align: center;
}
.from-title {
  text-align: center;
  padding: 0.5em 1em;
  font-size: 26px;
  color: #60b2fd;
  letter-spacing: 0.8rem;
  border-bottom: 1px solid #60b2fd;
}
.c3-findpwd {
  padding-right: 2rem;
}
</style>
